<template>
	<div class="h-full">
		<el-config-provider :size="assemblySize">
			<el-backtop :right="20" :bottom="100"> </el-backtop>
			<component :is="layout"> </component>
		</el-config-provider>
	</div>
</template>
<script setup>
// eslint-disable-next-line no-unused-vars
import { GlobalStore } from "@/stores";
import { appStore } from "@/stores/modules/app";
const app = appStore();

const assemblySize = computed(() => app.assemblySize);

const { width } = useWindowSize();
onMounted(() => {
	app.updateWindowWidth(window.innerWidth);
});
watch(width, val => {
	app.updateWindowWidth(val);
});
</script>
<script>
export default {
	components: {
		LayoutVertical: defineAsyncComponent(() => import("@/layout/vertical/LayoutVertical")),
		LayoutHorizontal: defineAsyncComponent(() => import("@/layout/horizontal/LayoutHorizontal"))
	},
	computed: {
		layout() {
			const app = appStore();
			if (this.$route.meta.layout === "full") return defineAsyncComponent(() => import("@/layout/full/Layoutfull.vue"));
			return `Layout${app.layout.layout}`;
		}
	}
};
</script>
